<template>
  <div>
    <el-card style="padding: 15px;">
      <template #header>
        <div class="card-header">产品目录列表</div>
      </template>
    <el-table
      :data="productCatalogsData"
      style="width: 100%"
      @selection-change="handleCatalogSelectionChange"
      ref="productTable"
    >
      <!-- 首列复选框 -->
      <el-table-column
        type="selection"
        width="55"
        align="center"
        label="选择"
      ></el-table-column>

      <!-- 品号列 -->
      <el-table-column
        prop="itemCode"
        label="品号"
        align="center"
      ></el-table-column>

      <!-- 品名列 -->
      <el-table-column
        prop="itemName"
        label="品名"
        align="center"
      ></el-table-column>

      <!-- 规格列 -->
      <el-table-column
        prop="itemSpecification"
        label="规格"
        align="center"
      ></el-table-column>

      <!-- 描述列 -->
      <el-table-column
        prop="itemDesc"
        label="描述"
        align="center"
      ></el-table-column>

      <!-- 图号列 -->
      <el-table-column
        prop="drawingNo"
        label="图号"
        align="center"
      ></el-table-column>

      <!-- 流程图号列 -->
      <el-table-column
        prop="flowChartNo"
        label="流程图号"
        align="center"
      ></el-table-column>

      <!-- 库存单位列 -->
      <el-table-column
        prop="unitName"
        label="库存单位"
        align="center"
      ></el-table-column>

      <!-- 产品分类列 -->
      <el-table-column
        prop="itemClassName"
        label="产品分类"
        align="center"
      ></el-table-column>

      <!-- 标准工时列 -->
      <el-table-column
        prop="workingHour"
        label="标准工时"
        align="center"
      ></el-table-column>
    </el-table>
    </el-card>
    <div class="card-footer" style="text-align: right; margin-top: 15px; padding: 0 10px;">
          <el-button type="primary" @click="handleSave" style="margin-right: 10px">保存</el-button>
          <el-button @click="handleCancel">取消</el-button>
        </div>
  </div>
</template>

<script>
import { getByItemSpecification } from '@/api/workorder/hdviewapiitem'
import {fetchListByLineModelingId,saveByLineModelingId} from '@/api/pfoc/realityProduceLineModelingItemExc'
export default {
  name: 'ProductCatalogs',
  props: {
    category: {
      type: String,
    },
    lineModelingId: {
      type: String,
    }
  },
  data() {
    return {
      productCatalogsData: [],
      unselectedData: [] // 存储未选中数据的对象
    }
  },
  mounted() {
    this.getProductCatalogsData();
  },
  methods: {
    handleCatalogSelectionChange(selection) {
      const allCodes = this.productCatalogsData.map(item => item.itemCode);
      // 获取选中项的 itemCode 数组
      const selectedCodes = selection.map(item => item.itemCode);
      // 计算未选中的 itemCode 数组
      this.unselectedData = allCodes.filter(code => !selectedCodes.includes(code));
    },
    getProductCatalogsData() {
      getByItemSpecification(this.category).then(res => {
        if (res.data.code !== 0) {
          this.$message.error(res.data.message)
          return
        }
        this.productCatalogsData = res.data.data;

        // 新增：数据加载完成后，通过$nextTick确保DOM更新后触发全选
        this.$nextTick(() => {
          if (this.$refs.productTable) {
            // this.$refs.productTable.toggleAllSelection();
            this.initData();
          }
        })
      })
    },
    initData() {
      fetchListByLineModelingId(this.lineModelingId).then(res => {
        if (res.data.code !== 0) {
          this.$message.error(res.data.message)
          return
        }
        const unselectedDataList = res.data.data.map(item => item.itemCode);

        // 新增：等待数据和表格渲染完成后取消勾选
        if (!this.$refs.productTable) return;
        console.log("this.productCatalogsData",this.productCatalogsData)
        // 遍历表格数据，取消对应行的选中状态
        this.productCatalogsData.forEach(item => {
          if (!unselectedDataList.includes(item.itemCode)) {
            console.log("取消勾选",item.itemCode)
            this.$refs.productTable.toggleRowSelection(item, true);
          }
        });
      })
    },
    handleSave() {

      saveByLineModelingId(this.lineModelingId, this.unselectedData).then(res => {
        if (res.data.code !== 0) {
          this.$message.error(res.data.message)
          return
        } else {
          this.$message.success("保存成功")
        }
        this.$emit('closeCategory');
      })
    },
    // 取消按钮点击事件
    handleCancel() {
      console.log('触发取消操作')
      this.$emit('closeCategory');
    }
  }
}
</script>
